import {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import {Col, Modal, Row} from 'antd';
import React, {useEffect, useState} from 'react';
import ReactJson from "@microlink/react-json-view";

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.InterfaceInfoVo) => void;
  onSubmit: (values: API.InterfaceInfoVo) => Promise<boolean>;
  updateModalVisible: boolean;
  values: Partial<API.InterfaceInfoVo>;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [requestParams, setRequestParams] = useState<JSON>(JSON.parse("{}"))
  const [requestHeader, setRequestHeader] = useState<JSON>(JSON.parse("{}"))
  const [responseHeader, setResponseHeader] = useState<JSON>(JSON.parse("{}"))
  // useEffect(() => {
  //     try {
  //       const tempRequestParams = JSON.parse(props.values.requestParams || "{}");
  //       setRequestParams(tempRequestParams);
  //
  //     } catch (e) {
  //       setRequestParams(JSON.parse("{}"));
  //     }
  //     try {
  //       setRequestHeader(JSON.parse(props.values.requestHeader || "{}"));
  //     } catch (e) {
  //       setRequestHeader(JSON.parse("{}"))
  //     }
  //     try {
  //       setResponseHeader(JSON.parse(props.values.responseHeader || "{}"))
  //     } catch (e) {
  //       setResponseHeader(JSON.parse("{}"))
  //     }
  //   }
  // ,[props.values])

  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{
              padding: '32px 40px 48px',
            }}
            visible={props.updateModalVisible}
            destroyOnClose={true}
            title={'修改接口'}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        title={'基本信息'}
        initialValues={{
          name: props.values.name,
          description: props.values.description,
        }}
      >
        <ProFormText
          name="name"
          label={'接口名称'}
          width="md"
          rules={[
            {
              required: true,
              message: '请输入接口名称！',
            },
          ]}
        />
        <ProFormTextArea
          name="description"
          width="md"
          label={'接口描述'}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
          url: props.values.url,
          method: props.values.method,
          status: props.values.status,
        }}
        title={"接口信息"}
      >
        <ProFormText
          name="url"
          label={'URL'}
          width="md"
          rules={[
            {
              required: true,
              message: '请输入URL',
            },
          ]}
        />
        <ProFormSelect
          name="method"
          label={'请求方式'}
          width="md"
          valueEnum={{
            GET: 'GET',
            POST: 'POST',
          }}
          rules={[
            {
              required: true,
              message: '请选择调用方式',
            },
          ]}
        />
        <ProFormSelect
          name="status"
          label={'接口状态'}
          width="md"
          valueEnum={{
            0: '关闭',
            1: '开启',
          }}
          rules={[
            {
              required: true,
              message: '请选择接口状态',
            },
          ]}
        />
      </StepsForm.StepForm>

      <StepsForm.StepForm
        initialValues={{
          requestParams: props.values.requestParams,
          requestHeader: props.values.requestHeader,
          responseHeader: props.values.responseHeader,
        }}
        onValuesChange={(_, values) => {
          try {
            const tempRequestParams = JSON.parse(values.requestParams);
            setRequestParams(tempRequestParams);
            console.log(values)
          } catch (e) {
            setRequestParams(JSON.parse("{}"));
          }
          try {
            setRequestHeader(JSON.parse(values.requestHeader));
          } catch (e) {
            setRequestHeader(JSON.parse("{}"))
          }
          try {
            setResponseHeader(JSON.parse(values.responseHeader))
          } catch (e) {
            setResponseHeader(JSON.parse("{}"))
          }
        }}
        title={'参数信息'}
      >
        <Row>
          <Col>
            <ProFormTextArea
              fieldProps={{
                autoSize: true
              }}
              name="requestParams"
              width="md"
              label={'请求参数'}
            />
          </Col>
          <Col>
            <ReactJson src={requestParams}/>
          </Col>
        </Row>
        <Row>
          <Col>
            <ProFormTextArea
              fieldProps={{
                autoSize: true
              }}
              name="requestHeader"
              width="md"
              label={'请求头'}
              placeholder={'请求头信息'}
            />
          </Col>
          <Col>
            <ReactJson src={requestHeader}/>
          </Col>
        </Row>
        <Row>
          <Col>
            <ProFormTextArea
              fieldProps={{
                autoSize: true
              }}
              name="responseHeader"
              width="md"
              label={'响应头'}
              placeholder={'响应头信息'}
            />
          </Col>
          <Col>
            <ReactJson src={responseHeader}/>
          </Col>
        </Row>


      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default UpdateForm;
